import { motion } from 'framer-motion'
import { Notification } from '@mantine/core'
import { useToastStore } from '@/store/modules/toast'
import { IconX, IconCheck } from '@tabler/icons-react';

export default function Toast() {
  const toastStore = useToastStore(state => state);

  function getColors() {
    return toastStore.type === 'success' ? 'teal' : 'red'
  }

  function renderIcon() {
    switch(toastStore.type) {
      case 'success':
        return <IconCheck size={18} />
      case 'error':
        return <IconX size={18} />
      default:
        return <IconX size={18} />
    }
  }

  if (!toastStore.show) {
    return null
  }

  return (
    <motion.div 
    className='fixed top-8 right-8 z-40'
    initial={{ opacity: 0, y: -40 }}
    animate={{ opacity: 1, y: 10 }}
    >
      <Notification 
      withBorder
      color={getColors()}
      title={toastStore.title}
      icon={renderIcon()}>
        <div className='w-[200px]'>{ toastStore.descripion }</div>
      </Notification>
    </motion.div>
  )
}